<!-- 学习历史  edit to 3023-01-07使用v2.0的接口查询学习历史，数据分组 -->
<template>
	<view class="history-page">
		<view class="header">
			<!-- #ifdef APP-PLUS -->
			<u-icon class="backIcon" name="arrow-left" color="#FFF" size="44" @click="back"></u-icon>
			<!-- #endif -->
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/history-header.png" mode=""></image>
		</view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" v-if="isshow">
			<view class="group list-group" v-for="group,INDEX in dataList">
				<view class="group-head">
					<view class="title-icon" :class="[
						computerIconClass(group.createTime)
					]"> </view>
					<h3 class="title"> {{ computerTimeString(group.createTime) }} </h3>
				</view>
				<view class="">
					<courseCardV2 v-for="item,index in group.data" :key="index" :item="item" @goDetail="goDetail(item)" />
				</view>
			</view>
			
		</z-paging>
	</view>
</template>

<script>
	import {
		studyRecords,
		studyHistory,
		learningRecordV2
	} from '@/apis/apis.js'
	import courseCardV2 from '../modules/courseCardV2.vue'
	import {dateFormat} from '../../../utils/date.js'
	export default {
		components: {
			courseCardV2
		},
		data() {
			return {
				dataList: [],
				isshow:false
			}
		},
		onShow() {
			this.isshow = true
		},
		onHide() {
			this.isshow = false
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 查询学习历史
			queryList(pageNo, pageSize) {
				learningRecordV2({
					pageNum: pageNo,
					pageSize: pageSize
				}).then(res => {
					console.log(res,'新学习历史-v2:')
					this.dataList = res.data || res.rows || []
					this.$refs.paging.complete(this.dataList);
				})
			},
			goDetail(e) {
				console.log(e);
				let flag=true//判断是历史记录跳课程详情
				uni.navigateTo({
					url: `/pages/index/courseItem/courseItem?id=${e.id}` 
				})
			},
			// 计算时间字符串
			computerTimeString(time){
				let today = dateFormat(new Date()) 
				let todayTime = new Date(today).getTime()
				let timeTime = new Date(dateFormat(time)).getTime()
				console.log(today,time,today == time,todayTime-timeTime )
				const timeDiff = todayTime - timeTime
				// 一天86400秒，时间戳是86400000
				if(today === time || timeDiff ===0 ){
					return '今天'
				}else if(timeDiff > 0 && timeDiff<=86400000){
					return '昨天'
				}else{
					return time
				}
			},
			// 根据 '今天'、'昨天'、'更早'这个标题文字去计算圆形图标的css类名
			computerIconClass(time){
				let timeStr = this.computerTimeString(time)
				if(timeStr === '今天'){
					return 'title-icon_today'
				}else if(timeStr === '昨天'){
					return 'title-icon_yesterday'
				}else{
					return 'title-icon_moreBefore'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}

	.list-group {
		padding: 30rpx 30rpx 0;
	}
	.history-page{
		.header{
			height: 340rpx;
			position: relative;
			image{
				width: 100%;
				height: 382rpx;
				position: absolute;
				z-index: 99;
				background-color: #FFFFFF;
				// background-color: #F8F8F8;
			}
			.backIcon{
				position: absolute;
				z-index: 100;
				top: 64rpx;
				left: 10rpx;
			}
		}
		/deep/ .zp-paging-touch-view{
			top: 370rpx !important;
		}
		.group{
			.group-head{
				display: flex;
				margin-bottom: 10rpx;
				.title-icon{
					width: 12rpx;
					height: 12rpx;
					background: #4FA6FC;
					box-shadow: 1rpx 5rpx 5rpx 0rpx rgba(79,166,252,0.3);
					border-radius: 50%;
					margin: 20rpx 20rpx 20rpx 0;
				}
				.title-icon_today{
					background: #4FA6FC;
					box-shadow: 1rpx 5rpx 5rpx 0rpx rgba(79,166,252,0.3);
				}
				.title-icon_yesterday{
					background: #B88EF0;
					box-shadow: 1px 5px 5px 0px rgba(184,142,240,0.3);
				}
				.title-icon_moreBefore{
					background: #4EDB5B;
					box-shadow: 1px 5px 5px 0px rgba(78,219,91,0.3);
				}
			}
		}
	}
	
</style>
